<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>添加银行卡</title>
    <script src="../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <?php
    require_once "session.php";
    ?>
</head>
<body>

<div id="head" style="position: relative;">
    <a href="javascript:history.go(-1)" class="back_btn">
        <span class="glyphicon glyphicon-chevron-left " style="line-height: 45px"></span>
    </a>
    <span style="font-size: 25px;">添加银行卡</span>
</div>

<div id="MainPanel">
    <span id="msg">请绑定持卡人本人的银行卡</span>
    <div id="bank_center">
        <div>
            持卡人
            <input id="card_user" type="text" class="pull-right bank_input" onkeyup="input()" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
        </div>
        <div>
            银行
            <select id="choose_bank" class="pull-right" >
                <option>支付宝</option>
                <option>中国银行</option>
                <option>工商银行</option>
                <option>建设银行</option>
                <option>农业银行</option>
                <option>邮政储蓄</option>
                <option>招商银行</option>
                <option>交通银行</option>
                <option>广大银行</option>
            </select>
        </div>
        <div>
            卡号
            <input id="card_num" type="text"  placeholder="银行卡号" class="pull-right bank_input" onkeyup="input()" onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>
    </div>
    <span>智能加密，保障你的用卡安全</span>
    <button id="next" disabled="disabled">下一步</button>
</div>
<div class="modal"  id="show_msg" style="display:none;width:80%;margin:40% auto;">
    <div class="modal-content">
        <div class="modal-header" style="background-color: deepskyblue">添加提示</div>
        <div class="modal-body" id="msg_body">
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" id="enter" style="font-family: 楷体;font-size: 17px">确定</button>
        </div>
    </div>
</div>


<script>
    var height=document.body.scrollHeight;
    document.getElementById("MainPanel").style.height=height+"px";

    var btn=document.getElementById("next");
    $('#card_user').bind('input propertychange', function(){
        input();
    });
    $('#card_num').bind('input propertychange', function(){
        input();
    });
    function input() {
        var card_user=$("#card_user").val();
        var card_num=$("#card_num").val();
        if(card_user!=""&&card_num!=""&&card_num.length>=5){
            btn.style.backgroundColor="rgb(255,137,0)";
            btn.style.color="white";
            $("#next").removeAttr("disabled");
        }else{
            btn.style.backgroundColor="rgb(221,221,221)";
            btn.style.color="rgb(193,193,193)";
            btn.disabled="disabled";
        }
    }

    $('#next').on("touchend",function () {
        var card_user=$("#card_user").val();
        var card_num=$("#card_num").val();
        var bank=$("#choose_bank").val();
        if($.trim(card_user)!=""){
            $.post("fun_add_bank.php",{name:card_user,number:card_num,bank:bank},function (o){
                if(o!="") {
                    $('#msg_body').html(o);
                    $('#show_msg').show(500);
                }else{
                    $('#msg_body').html('恭喜您,添加成功！');
                    $('#show_msg').show(500);
                }
            });
        }else{
            $("#card_user").val("");
        }
    });
    $('#enter').on("touchend",function(){
        $('#msg_body').html("");
        $('#show_msg').hide(500);
        location.href="User_Menu.php";
    });
    $(function() {
        $("[ontouchend]").each(function(index, element) {
            var moved = false;
            var bindFn = function(touchEndFn) {
                if (!moved) {
                    eval(touchEndFn);
                }
                moved = false;
            }
            $(this).bind("touchend", bindFn.bind(this, $(this).attr("ontouchend")));
            $(this).bind("touchmove", function() {
                moved = true;
            });
            $(this).removeAttr("ontouchend");
        });

    })
</script>
</body>
</html>